{% extends 'base.html' %}
{% block body %}

<!-- md to html generator -->
<script src="static/js/marked.min.js"></script>
<link rel="stylesheet" href="static/css/github-markdown.css">

<link rel="stylesheet" href="static/css/codemirror.css">
<style>
  .error {
    background: #ffc5c3;
  }

  .correct {
    background: #ddffd1;
  }

  .validation {
    margin: 1em 0;
    padding: 1em 1em;
    width: 100%;
  }

  .CodeMirror {
    height: 600px;
  }

  .hidden {
    display: none;
  }

  iframe {
    min-height: 300px;
  }

  .close-icon {
    cursor: pointer;
    padding-right: 10px;
    display: inline;
  }
</style>

<div class="ui container">
  <div class="ui wrapper">
    {% include 'includes/setup_help.html' %}

    <form action="api/project/config" method="post" class="ui form">

      <!-- Textarea & Preview in two cols -->
      <div class="ui two column grid zero-margin step2 stackable">
        <div class="column" id="left-column">

          <h3>Labeling Config</h3>

          <!-- Code -->
          <textarea name="label_config" cols="40" rows="10" class="project-form htx-html-editor"
                    id="id_label_config">{{ label_config_full }}</textarea>
          <br>

          <!-- Input values from imported data -->
          {% if input_values %}
            <div class="ui">
              {% for key in input_values %}
                <a class="ui label basic">{{key}}</a>
              {% endfor %}
            </div>
          {% endif %}

          <!-- Submit button -->
          <input type="submit" disabled id="submit_form"
                 class="project-form field ui button positive centered" value="Save"
                 onclick="create_project(event)"/>

          <div style="margin-top: 2em"></div>

        </div>
        <div class="column" style="padding-left: 0;">

          <h3>Interface Preview</h3>

          <!--Validation message -->
          <div class="ui error message validation"></div>

          <div id="editor-wrap"></div>
          <pre id="preload-editor">...</pre>

          <h3>Input Task Preview</h3>
          <pre class="segment" id="upload-data-example" style="word-wrap: break-word">...</pre>

          <h3>Output Result Preview</h3>
          <div class="segment">
            <pre class="segment" id="data-results" style="word-wrap: break-word ">...</pre>
          </div>
        </div>
      </div>

      <br/>
    </form>

    <!-- Error dialog -->
    <div class="ui basic modal" id="error-message" onclick="$('#error-message').modal('hide')">
      <div class="ui icon header">
        <i id="error-message-icon" class="exclamation triangle icon"></i>
      </div>
      <div class="ui content text" style="text-align: center; font-size: 120%">
        <p id="error-message-text">Error message here</p>
      </div>
    </div>

    <!-- Dimmer and loader --->
    <div class="ui dimmer" id="dimmer" style="position: fixed !important;">
      <div class="ui text active orange loader big slow">
        Saving label config ...<br/>
      </div>
    </div>

    {% with template_mode="codes" %}
      {% include 'includes/setup_templates.html' %}
    {% endwith %}

    <!-- Change template dialog -->
    <div class="ui basic modal" id="confirm-config-template-dialog">
      <i class="close icon"></i>
      <div class="ui icon header">
        <i class="exclamation triangle icon"></i>
      </div>
      <div class="content">
        <p style="text-align: center;font-size:120%">Data that you've put into textarea will be replaced,
          proceed?</p>
      </div>
      <div class="actions">
        <div class="ui deny button red basic inverted" id="abort-button">
          <i class="remove icon"></i>
          Abort
        </div>
        <div class="ui green ok inverted button" id="proceed" role="button" tabindex="0">
          <i class="checkmark icon"></i>
          Proceed
        </div>
      </div>
    </div>

  </div>
</div>

<script src="static/js/codemirror.js"></script>
<script src="static/js/xml.js"></script>

<script>
  var confirm_already_shown = false;
  var iframeTimer = null;
  var edit_count = 0;
  var current_template_name = 0;
  var current_template_category = 0;
  var first_render = true;

  // process create request
  function process_request(result) {
    // error
    if (result.status !== 201) {
      console.log(result);
      var msg = message_from_response(result);

      $('#dimmer').removeClass('active');
      $('#error-message-text').text(msg);
      $('#error-message-icon').attr('class', 'red exclamation triangle icon');
      $('#error-message').modal('show');
    }

    // success
    else {
      $('#dimmer').removeClass('active');
      $('#error-message-icon').attr('class', 'green check icon');
      $('#error-message-text').html(
          "Label config saved! <br><br> " +
          "<a style='margin-bottom: 15px; min-width: 150px' class='ui positive button' href='import'>Import Tasks</a><br/>"
          {% if not project.no_tasks %} +
          "<a style='margin-bottom: 15px; min-width: 150px' class='ui positive button' href='.'>Start Labeling</a><br/>" +
          "<a class='ui positive button' style='min-width: 150px' href='tasks'>Explore Tasks</a><br/>"
          {% endif %}
      );
      $('#error-message').modal('show');
    }
  }

  // final action for create project
  function create_project(event) {
    $('#dimmer').addClass('active');
    smart_submit(process_request);
    event.preventDefault();
    return false;
  }

  function toggle_readme(user_action) {
    var icon = $('.close-icon');
    if (icon.hasClass('down')) {
      $('#markdown-body').find('*:not(:first-child)').hide();
      icon.addClass('right');
      icon.removeClass('down');
      Cookies.set('show-readme', false);
      if (user_action)
        $.ajax('/api/states?show-readme=0')
    }
    else {
      $('#markdown-body').find('*').show();
      icon.addClass('down');
      icon.removeClass('right');
      Cookies.set('show-readme', true);
      if (user_action)
        $.ajax('/api/states?show-readme=1')
    }
  }

  $(function () {

    function addTemplateConfig($el) {
      var template_pk = $el.data('value');
      var value = $('[data-template-pk="' + template_pk + '"]').html();

      // remove old readme
      $('#readme-body').remove();

      // extract readme from config
      var starter = '<!-- readme', terminator = '-->';
      var start = value.indexOf(starter);
      if (start >= 0) {
        var body_length = value.indexOf(terminator, start) - start - starter.length;
        var readme = value.substr(start + starter.length, body_length);
        var readme_body = $(
          '<div id="readme-body">' +
            '<i class="icon caret down close-icon" onclick="toggle_readme()"></i>' +
            '<div class="markdown-body" id="markdown-body"></div>' +
          '</div>'
        );
        readme_body.find('.markdown-body').html(marked(readme));

        $('#left-column').prepend(readme_body);
        if (Cookies.get('show-readme', false) !== "true") {
          toggle_readme(false);
        }

        // make collapsible first header of readme
        $('#markdown-body').find('*:first-child').css('cursor', 'pointer').on('click', function() {
          toggle_readme(true);
        });

        // find first XML tag (<View> as usual) and start from it
        value = value.slice(value.indexOf('<', start + starter.length + body_length + terminator.length))
      }

      labelEditor.setValue(value);
      first_render = true;
    }

    // switch template by click
    $('.use-template').on('click', function () {
      var $el = $(this);
      edit_count = 0;
      current_template_name = $el.text();
      current_template_category = $($el.parent().parent().find('i')[0]).attr('title');

      if (labelEditor.getValue() !== '' && !confirm_already_shown) {
        var dialog = $('#confirm-config-template-dialog');
        dialog.modal({
          closable: true,
          keyboardShortcuts: true,
          onApprove: function () {
            addTemplateConfig($el);
          }
        }).modal('show');

        // close on enter, unfortunately keyboardShortcuts doesn't work
        dialog.on('keypress', function () {
          if (event.keyCode === 13) {
            dialog.modal('hide');
            addTemplateConfig($el);
          }
        });

        confirm_already_shown = true;

      } else {
        addTemplateConfig($el);
      }

      return false;
    });
  });

  function debounce(func, wait, immediate) {
    let timeout;

    return function () {
      const context = this, args = arguments;
      const later = () => {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      const callNow = immediate && !timeout;

      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  }

  $(function () {
    var prev_completion = null;

    // serialize editor output by timer
    setInterval(function () {
      let iframe = document.getElementById('render-editor');
      if (iframe !== null) {
        let Htx = iframe.contentWindow.Htx;
        if (typeof Htx !== 'undefined') {
          var completion = JSON.stringify(Htx.completionStore.selected.serializeCompletion(), null, 4);
          if (prev_completion !== completion) {
            $('#data-results').text(completion);
            prev_completion = completion;
          }
        }
      }
    }, 500);

    function validation_message(msg, status) {
      let o = $('.validation');
      o.text(msg);

      if (status === -1) {
        o.removeClass('hidden');
        o.addClass('visible');
      }
      if (status === 0) {
        o.removeClass('visible');
        o.addClass('hidden');
      }
    }

    // storage of validation results
    // let is_collection_ok = false;
    let is_label_ok = false;

    function check_submit_button() {
      // Create new project behavior
      if (is_label_ok && labelEditor.getValue() !== '') {
        $('#submit_form').prop('disabled', false);
      } else {
        $('#submit_form').prop('disabled', true);
      }
    }

    function editor_iframe(res) {
      // generate new iframe
      let iframe = $('<iframe class="editor-iframe"><iframe>');
      // add iframe to wrapper div
      $('#editor-wrap').append(iframe);

      iframe.on('load', function () {
        // remove old iframe
        $('#render-editor').hide();
        $('#render-editor').remove();
        // assign id to new iframe
        iframe.attr('id', 'render-editor');
        iframe.show();
        // set height for iframe
        let obj = document.getElementById('render-editor');

        // wait until all images and resources from iframe loading
        clearTimeout(iframeTimer);
        iframeTimer = setInterval(function() {
          obj.style.height = (obj.contentWindow.document.body.scrollHeight) + 'px';
        }, 200);

        // hide "..."
        $('#preload-editor').hide();
        $('#preload-editor').text('');
      });

      // load new data into iframe
      iframe.attr('srcdoc', res);
    }

    function show_render_editor(editor) {
      let config = labelEditor.getValue();
      $.ajax({
        url: 'render-label-studio',
        method: 'POST',
        data: {
          config: config,
          current_template_name : current_template_name,
          current_template_category: current_template_category
        },
        success: editor_iframe,
        error: function () {
          $('#preload-editor').show();
        }
      })
    }

    // send request to server with configs to validate
    function validate_config(editor) {
      // get current scheme type from current editor
      let url = 'api/validate-config';
      var val = labelEditor.getValue();

      if (!val.length)
        return;

      // label config validation
      $.ajax({
        url: url,
        method: 'POST',
        data: {label_config: val, edit_count: edit_count},
        success: function (res) {
          is_label_ok = true;
          validation_message('', 0);
          show_render_editor(editor);
          check_submit_button();
          first_render = false;
        },
        error: function (res) {
          is_label_ok = false;
          validation_message(res.responseJSON['label_config'][0], -1);
          $('#render-editor').hide();
          $('#preload-editor').show();
          check_submit_button();

          first_render = false;
        }
      });

      // load sample task
      $.post({
        url: 'api/import-example',
        data: {label_config: val}
      })
        .fail(o => {
          $('#upload-data-example').text('...')
        })
        .done(o => {
          $('#upload-data-example').text(JSON.stringify(JSON.parse(o), null, 4))
        })
    }

    // Label code mirror
    let labelEditor = CodeMirror.fromTextArea(document.getElementById('id_label_config'), {
      lineNumbers: true,
      mode: "text/html"
    });
    // refresh for proper line numbers drawing
    labelEditor.refresh();
    // add validation
    labelEditor.on('change', debounce(function (editor) {
      validate_config(editor);
      edit_count++;
      $('#id_label_config').val(editor.getValue());

    }, 500));

    window.labelEditor = labelEditor;

    // validate config on start
    validate_config(window.labelEditor);

    // click on close icon of messages
    $('.message .close')
      .on('click', function () {
        $(this).closest('.message').transition('fade');
      });
  });
</script>

{% endblock %}
